﻿@model QuestionDetailsViewModel

<article>
    <section class="question">
        <div id="question-header">
            <h1>
                @Html.ActionLink(Model.Question.Title,
                                 "Details",
                                 "Question",
                                 new { id = Model.Question.Id },
                                 new { @class = "question-hyperlink" })</h1>
        </div>
        <div>
            <div class="vote">
                <a
                    id="vote-question-up-@Model.Question.Id"
                    class="voteUp"
                    title="This question shows research effort; it is useful and clear."
                    data-action="VoteUp"
                    data-id="@Model.Question.Id"
                    data-ct="question">up vote</a>
                <span 
                    id="vote-question-count-@Model.Question.Id"
                    class="vote-count-post">@Model.Question.Score</span>
                <a
                    id="vote-question-down-@Model.Question.Id"
                    class="voteDown"
                    title="This question does not show any research effort; it is unclear or not useful."
                    data-action="VoteDown"
                    data-id="@Model.Question.Id"
                    data-ct="question">down vote</a>
            </div>
            <div class="question-body">
                <div class="post-text">
                    <p>@Html.Markdown(Model.Question.Body)</p>
                </div>
                <div class="post-taglist">
                    @foreach (var tag in Model.Question.Tags)
                    {
                        @Html.ActionLink(tag,
                                         "ByTag",
                                         "Question",
                                         new { id = tag },
                                         new { @class = "post-tag" })
                    }
                </div>
                <div class="user-info">
                    <div class="user-gravatar32">
                        <a href="@Url.Action("Details", "User", new { id = Model.Question.Author.UserId })">
                            <img src="@Model.Question.Author.GravatarUrl" alt="" width="32" height="32"></a>
                    </div>
                    <div class="user-info-details-container">
                        <div>
                            asked
                            <span class="relativetime">
                                @Model.Question.PostedOn.ToString("ddd, dd MMM yyyy")
                                at
                                @Model.Question.PostedOn.ToString("HH:mm")</span>
                        </div>
                        <div class="user-details">
                            @Html.ActionLink(Model.Question.Author.UserName, "Details", "User", new { id = Model.Question.Author.UserId }, null)
                            <span>@Model.Question.Author.ContributionsCount</span>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="cbt" />
        </div>
    </section>
    <div class="cbt"></div>
    @if (Model.Answers.IsNotNullOrEmpty())
    {
        <h2>Answers</h2>
        <section class="answers">
            @foreach (var answer in Model.Answers)
            {
                <div>
                    <div class="vote" id="answers-vote-container-@answer.AnswerId">
                        <a
                            id="vote-answer-up-@answer.AnswerId"
                            class="voteUp"
                            title="This answer is useful"
                            data-action="VoteUp"
                            data-id="@answer.AnswerId"
                            data-ct="answer">up vote</a>
                        <span
                            id="vote-answer-count-@answer.AnswerId"
                            class="vote-count-post">@answer.Score</span>
                        <a
                            id="vote-answer-down-@answer.AnswerId"
                            class="voteDown"
                            title="This answer is not useful"
                            data-action="VoteDown"
                            data-id="@answer.AnswerId"
                            data-ct="answer">down vote</a>
                        @if (answer.Accepted)
                        {
                            <span
                                id="accept-answer-@answer.AnswerId"
                                class="accepted"
                                title="This answer has been marked as accepted"
                                data-id="@answer.AnswerId">accepted</span>
                        }
                    </div>
                    <div class="question-body">
                        <div class="post-text">
                            <p>@Html.Markdown(answer.Content)</p>
                        </div>
                        <div class="user-info ">
                            <div class="user-gravatar32">
                                <a href="@Url.Action("Details", "User", new { id = answer.Author.UserId })">
                                    <img src="@answer.Author.GravatarUrl" alt="" width="32" height="32"></a>
                            </div>
                            <div class="user-info-details-container">
                                <div>
                                    posted
                                    <span class="relativetime">@answer.PostedOn.ToString("ddd, dd MMM yyyy") at @answer.PostedOn.ToString("HH:mm")</span>
                                </div>
                                <div class="user-details">
                                    @Html.ActionLink(answer.Author.UserName, "Details", "User", new { id = answer.Author.UserId }, null)
                                    <span>@answer.Author.ContributionsCount</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if (Model.Question.IsOwnedByCurrentUser && !Model.Question.Answered)
                    {
                        <div class="acceptation">
                            Do you wanna mark this answer as sccepted?
                            <a class="yes" data-id="@answer.AnswerId">Yes</a>
                        </div>
                    }
                    <hr class="cbt" />
                </div>
            }
        </section>
        <div class="cbt"></div>
    }
    <h2>Your Answer</h2>
    @if (User.IsAuthenticated())
    {
        using (Html.BeginForm("Add", "Answer", new { Model.Question.Id }))
        {
            @Html.AntiForgeryToken()
        <fieldset class="form-item">
            @Html.TextAreaFor(model => model.Input.Body, new { @class = "mdd_editor" })

            <p>
                <input type="submit" value="Post your answer">
            </p>
        </fieldset>
        }
    }
    else
    {
        <p>
            You have to be logged in order to add a contribute. Please, @Html.ActionLink("Log In now", "LogIn", "User")
        </p>
    }
</article>
<div id="dialog-message-ko" title="Error">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
        <span id="dialog-message-ko-text"></span>
    </p>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/content/themes/base/css")
    @Scripts.Render("~/bundles/markdowndeep")
    @Styles.Render("~/content/markdowndeep")
    <script type="text/javascript">
        var _dialogDefaults = {
            modal: true,
            draggable: false,
            resizable: false,
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            }
        };

        $(function() {
            function voteCallback(data) {
                if (data.Error == '') {
                    $('#vote-' + data.ContributeType + '-count-' + data.Id).text(data.Value);
                } else {
                    $('#dialog-message-ko-text').text(data.Error);
                    $('#dialog-message-ko').dialog(_dialogDefaults);
                }
            }

            function callVote(action, contributeId, type) {
                $.ajax({
                    url: action,
                    dataType: 'json',
                    type: 'POST',
                    data: { id: contributeId, contributeType: type },
                    success: function(data) {
                        voteCallback(data);
                    },
                    statusCode: {
                        401: function() {
                            window.location = '/User/LogIn/?ReturnUrl=' + encodeURIComponent(document.URL);
                        }
                    }
                });
            }

            $('.voteUp, .voteDown').click(function(evt) {
                var link = $(evt.target);
                var ct = link.data('ct');
                var url = '/' + ct + '/' + link.data('action') + '/';
                callVote(url, link.data('id'), ct);
            });

            $('textarea.mdd_editor').MarkdownDeep({
                    ExtraMode: true,
                    resizebar: false,
                    SafeMode: true,
                    help_location: '/Content/markdown/mdd_help.htm'
            });

            $('.acceptation a.yes').click(function(evt) {
                var link = $(evt.target);
                callAccepted(link.data('id'));
            });

            function callAccepted(answerId) {
                $.ajax({
                    url: '/Answer/Accept/',
                    dataType: 'json',
                    type: 'POST',
                    data: { id: answerId },
                    success: function (data) {
                        acceptCallback(data);
                    },
                    statusCode: {
                        401: function () {
                            window.location = '/User/LogIn/?ReturnUrl=' + encodeURIComponent(document.URL);
                        }
                    }
                });
            }
            
            function acceptCallback(data) {
                if (data.Error == '') {
                    $('.acceptation').remove();
                    $('#answers-vote-container-' + data.Id).append('<span class="accepted" title="This answer has been marked as accepted">accepted</span>');
                } else {
                    $('#dialog-message-ko-text').text(data.Error);
                    $('#dialog-message-ko').dialog(_dialogDefaults);
                }
            }
        });
    </script>
}
@section Sidebar {
    <div id="sidebar">
        <div class="module newuser" id="newuser-box">
            <h4>Question stats</h4>
            <div>
                <p>
                    Views: <strong>@Model.Question.Views</strong>
                </p>
            </div>
            <h4 id="h-popular-tags">Recent Tags</h4>
            <div id="popular-tags-list">
                @foreach (var tag in Model.Question.FeaturedTags)
                {
                    <a 
                        href="@Url.Action("ByTag", "Question", new { id = tag.Name })" 
                        class="post-tag" 
                        title="show questions tagged '@tag.Name'"
                        rel="tag">@tag.Name</a>

                    <span class="item-multiplier color-white">
                        <span>×</span>
                        <span>@tag.Count</span>
                        <br />
                    </span>
                }
            </div>
        </div>
    </div>
}